<template>
  <a-breadcrumb>
    <a-breadcrumb-item>系统管理</a-breadcrumb-item>
    <a-breadcrumb-item>文章管理</a-breadcrumb-item>
  </a-breadcrumb>
  <a-card :loading="false">
    <header>
      <div class="left">
        <a-input class="header_input" v-model:value="query.value" placeholder="请输入搜索内容"  allow-clear />
        <a-cascader
            class="drop"
            v-model:value="query.categoryid"
            style="width: 70%"
            :options="CategoryList"
            placeholder="请选择分类"
        />
      </div>
      <div class="right">
        <a-button type="primary">新增</a-button>
      </div>
    </header>

    <a-table
        :columns="columns"
        :data-source="data"
        :pagination="false"
        :loading="loading"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'status'">
          <a-tag color="success" v-if="text === '1'">正常</a-tag>
          <a-tag color="error" v-else>草稿</a-tag>
        </template>
        <template v-if="column.dataIndex === 'isTop'">
          <a-tag color="success" v-if="text === '1'">是</a-tag>
          <a-tag color="error" v-else>否</a-tag>
        </template>
        <template v-if="column.dataIndex === 'handle'">
          <a-button type="primary" @click="handleEdit(text)">编辑</a-button>
          <a-button  danger @click="handleDel(text)">删除</a-button>
        </template>
      </template>
    </a-table>
    <a-pagination v-model:current="query.pageNum"  show-size-changer :total="total" @showSizeChange="onShowSizeChange" />
  </a-card>
</template>

<script setup lang="ts">
import {createVNode, reactive, ref, watch} from "vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import {adminDelArticle, adminGetArticleList,getCategoryList} from "@/api/api";
import {useRouter} from "vue-router";
import {message, Modal} from "ant-design-vue";
const  loading = ref<boolean>(true);
const CategoryList = ref([])
const  total = ref<number>(0);
const  data = ref([]);
const  router = useRouter();
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '标题',
    dataIndex: 'title',
    width: '25%',
  },
  {
    title: '分类名称',
    dataIndex: 'categoryName',
  },
  {
    title: '摘要',
    dataIndex: 'digest',
    width: '20%',
  },
  {
    title: '浏览量',
    dataIndex: 'browse',
  },
  {
    title: '置顶',
    dataIndex: 'isTop',
  },
  {
    title: '状态',
    dataIndex: 'status'
  },
  {
    title: '发布时间',
    dataIndex: 'createTime'
  },
  {
    title: '操作',
    dataIndex:'handle',
    width: '20%',
  }
];
type APIParams = {
  pageNum?: number;
  pageSize?: number;
  categoryid?:string | null;
  value?: string | null
};

const query: APIParams = reactive({
  pageNum:1,
  pageSize:10,
  categoryid:'',
  value:''
})
async function getArticle() {
  loading.value = true;
  let categoryid = query.categoryid!='' ? query.categoryid?.[0]: '';
  const  res = await adminGetArticleList({
    pageNum: query.pageNum,
    pageSize: query.pageSize,
    categoryid,
    value:query.value
  })
  total.value = res.data.total
  data.value = res.data.rows
  data.value.forEach((res:any)=>{
    res['handle'] = res.id;
  })
  loading.value = !loading.value;
}
getArticle();
const onShowSizeChange = (pagNum: number, pageSize: number) => {
  query.pageNum = pagNum;
  query.pageSize = pageSize;
};

watch(query,()=>{
  getArticle();
})


async function getCategory() {
  const res : any = await getCategoryList;
  res.data.forEach((item:any) =>{
    CategoryList.value.push({value:item.id,label:item.name})
  })
}
getCategory();

/**
 * 编辑文章
 * @param id
 */
function handleEdit(id: any) {
  router.push(`/admin/article/write/${id}`)
}

/**
 * 删除文章
 * @param id
 */
function handleDel(id:any) {
  Modal.confirm({
    icon: createVNode(ExclamationCircleOutlined),
    content: '你确定删除该文章？',
    okText: '确认',
    cancelText: '取消',
    async onOk(){
      const res:any = await adminDelArticle(id);
      if(res.code !=200) return message.error(res.msg);
      message.success(res.msg);
      await getArticle();
    }
  })
}

</script>

<style lang="less"  scoped>
header {
  display: flex;
  justify-content: space-between;
  .left {
    .header_input {
      width: 300px !important;
    }
    .drop {
      width: 130px !important;
      margin: 0 20px;
    }
    //.ant-btn {
    //  margin-right: 20px;
    //}
  }
}
/deep/ .ant-table-wrapper {
  .ant-btn {
    margin: 0 10px;
  }
}


</style>